<template>
    <div class="flexbox com_box height_100">
        <PlayPicture />
        <ViewDamaInfo />
        <AddMaterialTag :taglist="tag_list" ref="addTag" />
        <LabelSettingDialog :taglist="tag_list" :ModuleName="ModuleName" ref="labelsetting" />
        <div class="person_left">
            <div class="flexbox flexcolumn height_100">
                <div class="person_header flexbox flexcenter flexjust" style="height:59px">
                    <el-select v-model="queryInfo.channel" placeholder="请选择" @change="changeCatalogue" class="material_select">
                        <div slot="prefix" class="flexbox flexcenter">
                            <img src="../../assets/img/chanel_icon1.svg" alt="" v-if="queryInfo.channel==1">
                            <img src="../../assets/img/chanel_icon2.svg" alt="" v-else-if="queryInfo.channel==2">
                            <img src="../../assets/img/chanel_icon3.svg" alt="" v-else-if="queryInfo.channel==3">
                            <img src="../../assets/img/chanel_icon4.svg" alt="" v-else-if="queryInfo.channel==4">
                            <img src="../../assets/img/chanel_icon5.svg" alt="" v-else-if="queryInfo.channel==5">
                            <img src="../../assets/img/chanel_icon6.svg" alt="" v-else-if="queryInfo.channel==6">
                        </div>
                        <el-option v-for="item in channelList" :key="item.id" :label="item.nickname" :value="item.id">
                            <div class="flexbox flexcenter">
                                <img src="../../assets/img/chanel_icon1.svg" width="20" height="20" alt="" v-if="item.id==1">
                                <img src="../../assets/img/chanel_icon2.svg" width="20" height="20" alt="" v-else-if="item.id==2">
                                <img src="../../assets/img/chanel_icon3.svg" width="20" height="20" alt="" v-else-if="item.id==3">
                                <img src="../../assets/img/chanel_icon4.svg" width="20" height="20" alt="" v-else-if="item.id==4">
                                <img src="../../assets/img/chanel_icon5.svg" width="20" height="20" alt="" v-else-if="item.id==5">
                                <img src="../../assets/img/chanel_icon6.svg" width="20" height="20" alt="" v-else-if="item.id==6">
                                <div style="margin-left:8px">{{item.nickname}}</div>
                            </div>
                        </el-option>
                    </el-select>
                    <!-- <ul class="per_tab flexbox">
                        <li :class="{active:currActive==1}" @click="changeCatalogue(1)">千川</li>
                        <li :class="{active:currActive==2}" @click="changeCatalogue(2)">UD</li>
                        <li :class="{active:currActive==3}" @click="changeCatalogue(3)">巨量</li>
                        <li :class="{active:currActive==4}" @click="changeCatalogue(4)">腾讯</li>
                    </ul> -->
                </div>
                <div class="person_job flex1" v-loading="m_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="person_btn">
                        <el-input placeholder="请输入目录搜索" clearable prefix-icon="el-icon-search" v-model="catalogQuery">
                        </el-input>
                    </div>
                    <el-tree ref="tree" accordion :expand-on-click-node='true' :data="filteredData(catalogQuery,catalogData)" highlight-current :current-node-key="currentNodekey" @node-click="getTreeData" class="part_tree" node-key="id" :default-expanded-keys="isOpen" :props="defaultProps">
                        <div class="flexbox flexcenter flexbetween custom-tree-node" slot-scope="{ node, data }">
                            <div class="part_left flexbox flexcenter">
                                <img src="../../assets/img/tree_icon.svg" alt="" class="tree_icon" v-if="node.level==1">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" v-else-if="node.level==2">
                                    <path d="M1.99997 4.33333C1.99997 3.8731 2.37307 3.5 2.8333 3.5H7.91666L9.99999 6H17.0833C17.5436 6 17.9167 6.37308 17.9167 6.83333V16.1667C17.9167 16.6269 17.5436 17 17.0833 17H2.8333C2.37307 17 1.99997 16.6269 1.99997 16.1667V4.33333Z" fill="#95A5C9" fill-opacity="0.5" stroke="#95A5C9" stroke-linejoin="round" />
                                    <path d="M16.5 10H3.5" stroke="white" stroke-width="1.6" stroke-linejoin="round" />
                                </svg>
                                <span class="circle_mt" v-else-if="node.level==4"></span>
                                <span class="tree_title">{{node.label}}</span>
                            </div>
                        </div>
                    </el-tree>
                </div>
            </div>
        </div>
        <div class="person_right flexbox flexcolumn" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="mt_border">
                <div class="mt_head flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <div class="font_16">素材列表</div>
                        <div class="reset_btn" @click="resetScreen">重置</div>
                        <div class="rank_line"></div>
                        <img src="../../assets/img/down_icon.svg" alt="" class="rank_down" :class="{'rank_up':!showrank}" @click="showrank = !showrank">
                    </div>
                    <div class="flexbox flexcenter">
                        <div class="flexbox flexcenter drop_box">
                            <span class="drop_title">上传时间</span>
                        </div>
                        <div class="icon_btn icon_btn_32" style="margin-left:10px" @click="sortFun('asc')" v-if="queryInfo.order==''|| queryInfo.order=='desc'"><img src="../../assets/img/rank_icon.svg" alt=""></div>
                        <div class="icon_btn icon_btn_32 rote_180" style="margin-left:10px" @click="sortFun('desc')" v-else><img src="../../assets/img/rank_icon.svg" alt=""></div>
                    </div>
                </div>
                <div class="sch_hight flexbox flexcenter" style="height:60px;padding:0 20px" v-if="showrank">
                    <div class="flexbox flexcenter max_width">
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="drop_text">标签</span>
                                <span class="drop_title">{{tag_text.length>0?tag_text.toString():'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-input v-model="tagQuery" clearable placeholder="请输入内容" prefix-icon="el-icon-search" style="width:180px" size="small" class="dropdown_input"></el-input>
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':tag_text.length>0}">已选 {{tag_text.length}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearFilter('tag_text','tag')" v-if="tag_text.length>0">清除已选</el-link>
                                </div>
                                <el-checkbox-group v-model="queryInfo.tag" class="check_style" @change="selectText2(tag_list,queryInfo.tag,'tag_text','name')">
                                    <el-checkbox :label="item.id" v-for="item in filteredData(tagQuery,tag_list,'name')" :key='item.id'>
                                        <span class="el_check_title">{{item.name}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="flexbox flexcenter">
                        <el-input style="width:216px;margin-left:5px" clearable size="small" placeholder="素材名称" suffix-icon="el-icon-search" @change="getDataList(1)" v-model="queryInfo.query">
                        </el-input>
                        <el-date-picker style="width:260px;margin-left:12px" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" clearable size="small" @change="getDataList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
            </div>
            <div class="flex over_box">
                <template v-if="total>0">
                    <div class="material_content" :class="{'material_flex':total<3}">
                        <div class="material_item" v-for="(item,index) in tableData" :key="index">
                            <div class="material_img">
                                <el-carousel height="160px" :autoplay='false' trigger="click" class="picture_carousel">
                                    <el-carousel-item v-for="(img,index) in item.material" :key="index">
                                        <div class="material_img flexbox flexcenter flexjust">
                                            <img :src="img.url" alt="" class="material_img_big">
                                            <img :src="img.url" alt="" class="material_img_small">
                                        </div>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                            <div class="material_info">
                                <div class="material_t">
                                    <el-tooltip content="" placement="top">
                                        <div slot="content" class="flexbox flexcenter font_14">
                                            核心创意人：{{item.centre_name}}
                                            <span class="mt_line"></span>
                                            平面：{{item.designer_name}}
                                        </div>
                                        <div class="material_t_name">{{item.material_name}}</div>
                                    </el-tooltip>
                                    <div class="material_t_tag">
                                        <span v-for="(tag,indext) in item.tag" :key="tag.id">{{tag.name}} <span v-if="indext!==item.tag.length-1">/</span></span>
                                    </div>
                                    <div class="material_t_time">{{item.create_time}}</div>
                                </div>
                                <!-- <div class="material_c">
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">消耗</span>
                                        <span class="material_c_text2">{{item.cost}}</span>
                                    </div>
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">展示</span>
                                        <span class="material_c_text2">{{item.show}}</span>
                                    </div>
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">点击率</span>
                                        <span class="material_c_text2">{{item.click_rate}}%</span>
                                    </div>
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">支付ROI</span>
                                        <span class="material_c_text2">{{item.roi}}</span>
                                    </div>
                                </div> -->
                                <div class="material_b flexbox flexcenter flexbetween">
                                    <el-button plain size="mini" style="width:124px" @click="playPicture(item.material)">
                                        <div class="flexbox flexcenter flexjust">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="#616C85" xmlns="http://www.w3.org/2000/svg" class="fill_svg btn_svg">
                                                <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69466 13.3353 7.33333 13.3334C4.02133 13.3334 1.33333 10.6454 1.33333 7.33337C1.33333 4.02137 4.02133 1.33337 7.33333 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8721 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91133 2.66671 7.33333 2.66671C4.75466 2.66671 2.66666 4.75471 2.66666 7.33337C2.66666 9.91137 4.75466 12 7.33333 12C8.54695 12.002 9.71325 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="inherit" />
                                            </svg>
                                            查看
                                        </div>
                                    </el-button>
                                    <el-button plain size="mini" style="width:104px" @click="addMaterialTag(item,2)">
                                        <div class="flexbox flexcenter flexjust">
                                            <svg width="17" height="16" class="stroke_svg btn_svg" viewBox="0 0 17 16" stroke='#616C85' fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right:5px">
                                                <path d="M14.8361 8.43461C14.9923 8.59082 14.9923 8.84409 14.8361 9.0003L9.75035 14.0861C9.59414 14.2423 9.34087 14.2423 9.18466 14.0861L3.46943 8.37085C3.39388 8.2953 3.35169 8.19265 3.35228 8.0858L3.38011 3.02776C3.38131 2.80857 3.55871 2.63117 3.77791 2.62997L8.83586 2.60222L8.83257 2.00223L8.83586 2.60222C8.94271 2.60163 9.04534 2.64382 9.1209 2.71937L14.8361 8.43461Z" stroke="inherit" stroke-width="1.2" />
                                                <circle cx="6.75" cy="6" r="1" transform="rotate(90 6.75 6)" fill="#616C85" />
                                            </svg>
                                            标签
                                        </div>
                                    </el-button>
                                    <el-dropdown placement='bottom'>
                                        <el-button plain size="mini" style="width:32px;padding-left:0;padding-right:0;margin-left:10px" icon="el-icon-more"></el-button>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item @click.native="viewDamaInfo(item)" v-if="item.description">
                                                <div class="drop_item flexbox">
                                                    <img src="../../assets/img/dama_icon.svg" alt="" class="drop_icon">
                                                    <span class="drop_title">需求信息</span>
                                                </div>
                                            </el-dropdown-item>
                                            <el-dropdown-item @click.native="downLoad(item)">
                                                <div class="drop_item flexbox flexcenter">
                                                    <img src="../../assets/img/mt_down.svg" alt="" class="drop_icon">
                                                    <span class="drop_title">下载</span>
                                                </div>
                                            </el-dropdown-item>
                                            <!-- <el-dropdown-item @click.native="deletPicture(item.id)">
                                                <div class="drop_item flexbox">
                                                    <img src="../../assets/img/del_icon.svg" alt="" class="drop_icon">
                                                    <span class="drop_title">删除</span>
                                                </div>
                                            </el-dropdown-item> -->
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="page_box flexbox flexcenter" v-if="total>20">
                        <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                        </el-pagination>
                    </div>
                </template>

                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:100%" v-else>
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { channelList } from "../../assets/js/scheduling";
import PlayPicture from "./PlayPicture";
import AddMaterialTag from "./AddMaterialTag";
import LabelSettingDialog from "../LabelSettings/index";
import ViewDamaInfo from "./ViewDamaInfo";
// import JSZip from "jszip";
// import FileSaver from "file-saver";
export default {
    name: "",
    data() {
        return {
            ModuleName:'Material',
            currActive: 1,
            currFun: -1,
            loading: false,
            m_loading:false,
            isOpen: [0],
            showrank: true,
            currentNodekey: 0, //默认选中的节点树
            catalogData: [], //目录列表
            catalogQuery: "",
            tag_list: [],
            tag_text: [],
            tagQuery: "",
            catalogueInfo: {
                channel: 1,
                soure_type: 2,
            },
            queryInfo: {
                page: 1,
                limit: 20,
                query: "",
                date: [],
                cate_id: "",
                field: "create_time",
                order: "",
                channel: 1,
                tag: [],
            },
            total: 0,
            setpage: 1,
            tableData: [],
            defaultProps: {
                children: "next",
                label: "name",
            },
            channelList:[],
        };
    },
    created() {
        this.channelList = channelList;
        this.getCatalogueList();
        this.getDataList(1);
        this.getTagList();
    },
    methods: {
        // tab切换
        changeCatalogue(index) {
            this.currActive = index;
            this.catalogueInfo.channel = index;
            this.queryInfo.cate_id = "";
            this.queryInfo.channel = index;
            this.getCatalogueList();
            this.getDataList(1);
        },

        // 树形节点点击
        getTreeData(data) {
            if (data.next.length == 0) {
                this.queryInfo.cate_id = data.id;
                this.getDataList(1);
            }
        },

        //获取目录列表
        async getCatalogueList() {
            this.m_loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/material/catalog",
                this.catalogueInfo
            );
            if (res.code !== 200) {
                this.m_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.m_loading = false;
                let arrText = {
                    brand_id: "",
                    name: "全部",
                    next: [],
                };
                if (res.data.length > 0) {
                    res.data.unshift(arrText);
                }
                this.catalogData = res.data;
            }
        },

        //获取数据列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/material/pictureList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        //获取标签列表
        async getTagList(query) {
            const { data: res } = await this.$http.post(
                "adminapi/material/tagList",
                {
                    page: 1,
                    limit: 0,
                    query:query?query:undefined
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.tag_list = res.data.list;
            }
        },

        // 删除图片
        deletPicture(id) {
            this.$confirm("是否要删除该图片?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/material/pictureDelete",
                        {
                            material_id: id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.getDataList(this.setpage);
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    }
                })
                .catch(() => {});
        },

        playPicture(url) {
            const attr = {
                dialogVsb: true,
                url: url,
            };
            this.$bus.emit("playPicture", attr);
        },

        //下载图片
        async downLoad(item) {
            const { data: res } = await this.$http.post(
                "/openapi/Compress/makeZip",
                {
                    material:item.material
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                let url = res.data.download
                const a = document.createElement("a");
                a.setAttribute("download", '素材图片');
                a.setAttribute("target", "_blank");
                a.setAttribute("href", url);
                a.click();
            }
        },

        // 查看需求信息
        viewDamaInfo(info) {
            const attr = {
                dialogVsb: true,
                description: info.description,
                name:info.material_name
            };
            this.$bus.emit("viewDamaInfo", attr);
        },


        // 添加标签
        addMaterialTag(item, type) {
            this.getTagList();
            this.$nextTick(()=>{
                this.$refs.labelsetting.openDialog();
                this.$refs.labelsetting.addMaterialTagForm.id = item.id
                this.$refs.labelsetting.source_type = type
                this.$refs.labelsetting.selectTag(this.tag_list[0]) 
                this.$refs.labelsetting.tagpid = item.tag
            })

            // this.$refs.addTag.dialogVisible = true
            // this.$refs.addTag.addMaterialTagForm.id = item.id
            // this.$refs.addTag.addMaterialTagForm.source_type = type
            // this.$refs.addTag.addMaterialTagForm.tag = item.tag.map((it) => {
            //     return it.id;
            // });
            // this.$refs.addTag.has_tag = JSON.parse(JSON.stringify(item.tag));
        },

        // 筛选
        selectText2(list, id, text, name) {
            let has_checked = [];
            list.forEach((element) => {
                id.forEach((val) => {
                    if (element.id == val) {
                        has_checked.push(element[name]);
                    }
                });
            });
            this[text] = has_checked;
            this.getDataList(1);
        },

        // 清除已选
        clearFilter(text, id, val) {
            this.queryInfo[id] = [];
            this[text] = [];
            if (val == "duration_val") {
                this[val] = "";
            } else {
                this[val] = [];
            }
            this.getDataList(1);
        },

        // 目录筛选
        filteredData(query, list) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.name.indexOf(query) !== -1) {
                    return item;
                }
            });
            return list;
        },

        filesToRar(arrImages, filename) {
            let _this = this;
            let zip = new JSZip();
            let cache = {};
            let promises = [];

            for (let item of arrImages) {
                const promise = _this
                    .getImgArrayBuffer(item.url)
                    .then((data) => {
                        // 下载文件, 并存成ArrayBuffer对象(blob)
                        zip.file(item.name, data, { binary: true }); // 逐个添加文件
                        cache[item.name] = data;
                    });
                promises.push(promise);
            }
            Promise.all(promises)
                .then(() => {
                    zip.generateAsync({ type: "blob" }).then((content) => {
                        // 生成二进制流
                        FileSaver.saveAs(content, filename); // 利用file-saver保存文件  自定义文件名
                        this.$message({
                            message: "压缩完成",
                            type: "success",
                        });
                        // window.clearInterval(setIme);
                    });
                })
                .catch((res) => {
                    this.$message.error("文件压缩失败");
                });
        },
        //获取文件blob
        getImgArrayBuffer(url) {
            let _this = this;
            return new Promise((resolve, reject) => {
                let xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", url, true);
                xmlhttp.responseType = "blob";
                xmlhttp.onload = function () {
                    if (this.status == 200) {
                        resolve(this.response);
                    } else {
                        reject(this.status);
                    }
                };
                xmlhttp.send();
            });
        },

        // 重置
        resetScreen() {
            this.queryInfo.query = "";
            this.queryInfo.date = [];
            this.queryInfo.order = "";
            this.tag_text = [];
            this.queryInfo.tag = [];
            this.getDataList(1);
        },

        // 排序
        sortFun(val) {
            this.queryInfo.order = val;
            this.getDataList(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        PlayPicture,
        AddMaterialTag,
        ViewDamaInfo,
        LabelSettingDialog
    },
};
</script>


<style scoped>
.person_left {
    width: 210px;
    flex-shrink: 0;
    border-right: 1px solid #ebebeb;
}
.person_right {
    flex: 1;
    overflow: auto;
}

.person_header {
    padding: 0 20px;
    flex-shrink: 0;
    height: 59px;
    border-bottom: 1px solid #ebebeb;
}
.person_title {
    font-size: 16px;
    font-weight: bold;
}

.person_center {
    padding: 20px 20px 0;
    overflow-y: auto;
}

.person_job {
    overflow-y: auto;
}

.per_tab {
    justify-content: center;
}
.per_tab li {
    height: 59px;
    line-height: 59px;
    padding: 0 10px;
    position: relative;
    font-size: 16px;
    color: #616c85;
    cursor: pointer;
}
.per_tab li::after {
    transform: scaleX(0);
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    border-top: 2px solid #4475ff;
    transition: all 0.3s;
}
.per_tab li.active {
    color: #17233d;
}
.per_tab li.active::after {
    transform: scaleX(1);
}

.person_btn {
    padding: 20px;
}
.custom-tree-node {
    height: 48px;
}
.tree_title {
    font-size: 14px;
    color: #17233d;
    margin-left: 10px;
}
.part_right {
    position: absolute;
    right: 10px;
    display: none;
}
.mt_head {
    height: 59px;
    padding: 0 20px;
}
.mt_border {
    border-bottom: 1px solid #ebebeb;
}
.circle_mt{
    width: 4px;
    height: 4px;
    background-color: #616C85;
    border-radius: 50%;
}
</style>

<style>
.part_tree .el-tree-node__content {
    height: 48px;
    position: relative;
}
.part_tree .el-tree-node__expand-icon {
    color: #616C85;
    margin-left: 15px;
}
.part_tree .el-tree-node__expand-icon.is-leaf {
    color: transparent;
}
.part_tree .el-tree-node__content:hover {
    background-color: #f6f8ff;
}
.material_select.el-select .el-input .el-input__inner {
    border-color: #F7F9FF;
    background-color: #F7F9FF;
    padding-left: 44px;
}
.material_select.el-select .el-input__prefix {
    display: flex;
    align-items: center;
    left: 12px;
}
</style>


